<template>
  <el-card class="container">
    <el-input disabled v-model="roleName"></el-input>
    <!-- 
       default-expand-all:默认展开所有
       default-checked-keys：默认勾选的节点key

     -->
    <el-tree
      ref="tree"
      :data="rolePerList"
      show-checkbox
      node-key="id"
      default-expand-all
      :default-checked-keys="roleCheckIds"
      :props="defaultProps"
    ></el-tree>
    <el-button type="primary" @click="addAssigin">确定</el-button>
    <el-button @click="$router.go(-1)">取消</el-button>
  </el-card>
</template>

<script>
export default {
  name: 'RoleAuth',
  data() {
    return {
      roleName: '',
      rolePerList: [], //所有的权限值
      roleCheckIds: [], //当前角色已经选择的权限，里面放所有的id
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  async mounted() {
    // 从临时回话中获取
    let { roleName, id } = JSON.parse(sessionStorage.getItem('row'))
    // console.log("row",JSON.parse(sessionStorage.getItem('row')))
    this.roleName = roleName
    let res = await this.$API.permission.reqPermissionList()
    this.rolePerList = res.children
    //1.展示所有权限，2.勾选check的
    let { reqPermissionList, reqGetAssignByRoleId } = this.$API.permission
    let [perListRes, rolePerListRes] = await Promise.allSettled([
      reqPermissionList(),
      reqGetAssignByRoleId(id)
    ])
    this.rolePerList = perListRes.value.children
    console.log('roleList', rolePerListRes.value.children)
    // 获取所有被选择的ids
    this.getRoleId(rolePerListRes.value.children)
  },

  methods: {
    getRoleId(roleList) {
      roleList.forEach(role => {
        if (role.select) {
          this.roleCheckIds.push(role.id)
        }
        // 在判断是否子节点,而且还有长度
        if (role.children && role.children.length) {
          this.getRoleId(role.children)
        }
      })
    },
    // 添加权限菜单
    // 遇到的问题：
    // 如果我添加这个选中的按钮，添加父级半选中的状态时，(路由过滤没有问题)但是下次再进入这个页面，父级半选状态变成全选状态了
    // 如果我添加只有选中的没有父级半选的状态时，路由得到的数组就没有父级，则路由过滤有问题

    async addAssigin() {
      //半选中的按钮
      const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
      console.log('halfCheckedKeys', halfCheckedKeys)

      // 所有选中的按钮（选中的）
      let checkedKeys = this.$refs.tree.getCheckedKeys()
      console.log('checkedKeys', checkedKeys)
      // 过滤掉半选状态
      // let permissionId = checkedKeys.filter(key => {
      //   return halfCheckedKeys.indexOf(key) === -1
      // })
      // await this.$API.permission.reqPermissionToRole(
      //   this.$route.query.row.id,
      //   permissionId.join(',')
      // )
      // 半选和全选都要
      let permissionIds = halfCheckedKeys.slice(1).concat(checkedKeys)
      await this.$API.permission.reqPermissionToRole(
        this.$route.query.row.id,
        permissionIds.join(',')
      )

      this.$message({
        type: 'success',
        message: '分配权限成功！'
      })
      this.$router.go(-1)
    }
  }
}
</script>

<style></style>
